import { Card, Input, Upload, message, Form, Empty } from "antd";
import { InboxOutlined } from "@ant-design/icons";
import { HeaderFormCom } from "../../../components/ArticleDetailCom/DrawerMultilayer/OssFileDrawer";
import { getFileNameUUID, put, signatureUrl } from "../../../utils/oss";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import React from "react";
import "./index.scss";
const { Dragger } = Upload;
function PosterAdmin() {
  const handleUpload = async (option) => {
    NProgress.start();
    // // 获取文件的后缀名
    var obj = option.file.name;
    var index = obj.lastIndexOf(".");
    obj = obj.substring(index, obj.length);
    // 生成的文件名，保留文件后缀名，进行拼接
    let objName = getFileNameUUID() + option.file.name;
    // 调用 ali-oss 中的方法,flieName是存放的文件夹名称，可自己定义
    await put(`flieName/${objName}`, option.file).then(() => {
      // console.log(res);
      message.success("上传成功");
      // 上传成功之后，转换真实的地址
      signatureUrl(`flieName/${objName}`).then((res) => {});
    });
    await NProgress.done();
  };
  return (
    <div className="poster-admin-box">
      <div>
        <DraggerLoader handleUpload={handleUpload}></DraggerLoader>
      </div>
      <Card>
        <HeaderFormCom>
          <Form layout="inline">
            <Form.Item label="文件名称">
              <Input placeholder="请输入文件名称" />
            </Form.Item>
          </Form>
        </HeaderFormCom>
      </Card>
      <Card>
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
      </Card>
    </div>
  );
}

export default PosterAdmin;

export const DraggerLoader = ({ handleUpload, showUploadList = false }) => {
  return (
    <Dragger style={{ backgroundColor: "#FFFFFF" }} customRequest={handleUpload} showUploadList={showUploadList}>
      <p className="ant-upload-drag-icon">
        <InboxOutlined />
      </p>
      <p className="ant-upload-text">点击选择文件或将文件拖拽到此处</p>
      <p className="ant-upload-hint">文件将上传到OSS,如未配置请先配置</p>
    </Dragger>
  );
};
